
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>校验</title>
    <link href="/static/devtools30/layui/css/layui.css" rel="stylesheet" />
    <link href="/static/devtools30/css/devindexbase.css" rel="stylesheet" />
    <link href="/static/devtools30/layui-v2.5.6/ext/soulTable/soulTable.css" rel="stylesheet"/>

    <script src="/static/devtools30/js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="/static/devtools30/layui/layui.all.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/devtoolCommon.js" type="text/javascript"></script>

    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/theme/eclipse.css" rel="stylesheet" type="text/css" />
    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/lib/codemirror.css" rel="stylesheet" />
    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/addon/display/fullscreen.css" rel="stylesheet" />
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/lib/codemirror.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/mode/sql/sql.js" type="text/javascript"></script>

    <style>
        .CodeMirror {
            border: 1px solid #eee;
        }
        .wrap {
            padding: 5px;
            background: #f7f7f7;
        }

        .wrap>div {
            width: 49%;
        }

        .layui-table,
        .layui-table-view {
            margin: 0!important;
        }


        /*下拉框高度*/

        .addwrap .layui-input,
        .layui-select {
            height: 25px;
        }


        /*表单左边文本样式*/

        .addwrap .layui-form-label {
            padding: 0;
            text-align: left;
            height: 26px;
            line-height: 26px;
            width: 50px;
        }

        .height26 .layui-form-item {
            height: 26px;
            margin-bottom: 10px;
        }

        .layui-form-label {
            width: 50px;
            text-align: left;
            height: 26px;
            line-height: 26px;
            padding: 0;
        }

        .layui-input,
        .layui-select,
        .layui-textarea {
            height: 26px;
        }

        .width120 .layui-input-inline {
            width: 150px!important;
        }

        .wrap .tjbtn {
            width: 50%;
            right: 0;
            left: 50%;
        }

        .rightform {
            padding: 19px 8px;
            background: #ffffff;
        }

        .textheight {
            height: 100px;
        }

        .layui-form-item .layui-form-checkbox[lay-skin=primary] {
            margin-left: 0!important;
        }
        /*页面内边距*/

        .addwrap {
            padding: 30px 100px 30px 100px;
        }


        /*下拉框高度*/

        .addwrap .layui-input,
        .layui-select {
            height: 25px;
        }


        /*表单左边文本样式*/

        .addwrap .layui-form-label {
            padding: 0;
            text-align: left;
            height: 26px;
            line-height: 26px;
            width: 50px;
        }


        /*下拉框子项样式*/

        .addwrap .layui-form-select dl {
            top: 26px;
            padding: 0;
        }


        /*下拉框子项内容高度*/

        .addwrap .layui-form-select dl dd,
        .layui-form-select dl dt {
            line-height: 24px;
        }

        .addwrap .layui-input-block {
            min-height: 26px;
            margin-left: 35px;
        }


        /*复选框外边距*/

        .layui-form-item .layui-form-checkbox[lay-skin=primary] {
            margin-top: 0;
            margin-left: 64px;
        }

        .addwrap .layui-input-block {
            margin-left: 0;
        }


        /*多行文本框样式*/

        .layui-textarea {
            min-height: 50px;
        }

        .height26 .layui-form-item {
            height: 26px;
        }


        /*必填红色星号样式*/

        .layui-form-mid {
            line-height: normal!important;
        }
    </style>
</head>
<body>
<div class="flex flex-jusity-betreen wrap">
    <div>
        <div class="backgroundf">
            <table id="mygrid" lay-filter="mygrid"></table>
        </div>
        <div class="backgroundf">
            <table id="mygrid2" lay-filter="mygrid2"></table>
        </div>
    </div>
    <div class="rightform layui-form" lay-filter="form">
        <input type="hidden" name="id" id ="id" th:value="${entity.id}"/>
        <input type="hidden" name="planid" id ="planid" th:value="${entity.planid}"/>
        <input type="hidden" name="paraid" id ="paraid" th:value="${entity.paraid}"/>
        <div class="padding100 flex"  >
            <div class="">查询SQL</div>
            <div class="colorred marginleft10" >
                * 1、#values# 替换实际传入参数
            </div>
        </div>
        <div class="layui-input-block" style="margin-left: 0;font-size: 13px;">
            <textarea name="content" id="content" placeholder="请输入查询条件SQL" th:utext="${entity.tjsql}" class="layui-textarea textheight"></textarea>
        </div>
        <div class="layui-form-item">
            <div class="flex flex-jusity-around tjbtn">
                <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary qx" onclick="closeWin()">取消</button>
                <button class="layui-btn layui-btn-radius layui-btn-sm " lay-submit lay-filter="save">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    var id=$("#id").val();
    var planid=$("#planid").val();
    var height = dlCommon.getWinHeight();
    var width=dlCommon.getWinWidth();

    var grid3tableid;
    var grid3tablecode;

    var editor;

    layui.config({
        base: '/static/devtools30/layui-v2.5.6/ext/',// 第三方模块所在目录
        version: 'v1.5.10' // 插件版本号
    }).extend({
        soulTable: 'soulTable/soulTable',
        tableChild: 'soulTable/tableChild',
        tableMerge: 'soulTable/tableMerge',
        tableFilter: 'soulTable/tableFilter',
        excel: 'soulTable/excel',
        dltable: 'treegrid/dltable',
        treeGrid:'treegrid/treeGrid'
    });

    layui.use(['form', 'table', 'jquery','treeGrid','layer','soulTable','tree'], function(){
        $(function(){
            initGrid();
            initEvent();
            getMetadataList();
        });
    });


    function closeWin(){
        dlCommon.closeParentLayer();
    }

    function initEvent(){
        editor = CodeMirror.fromTextArea(document.getElementById("content"), {
            lineNumbers: true,
            matchBrackets: true,
            lineWrapping:true,
            mode: "text/x-mssql",
            extraKeys: {

                "Esc": function(cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                }
            }
            // mode: "text/x-sql"
        });
        editor.setOption("theme", "eclipse");
        editor.setSize('auto', height-250);
        // editor.setValue()


        layui.form.on('submit(save)', function(data){
            saveData();
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        layui.form.render();
    }

    function saveData(){
        var data = layui.form.val('form');
        data.modelid=grid3tableid;
        data.tjsql=editor.getValue();
        var url="/DevtZbplanParatjEntityController/save";
        dlCommon.post(url,data,function(res){
            if(!res.success){
                dlCommon.layerError(res.msg);
                return;
            }
            dlCommon.layerSuccess("保存成功",function(){
                closeWin();
            })
        },true)
    }

    function initGrid(){

        layui.table.render({
            elem: '#mygrid'
            ,height: height*0.45
            ,size: 'sm' //小尺寸的表格
            ,page: false //开启分页
            ,cols: [
            [ //表头
                {field: 'xh', title: '序号', width:40,type:"numbers"}
                ,{field: 'name', title: '表名',filter:true, width:150,}
                ,{field: 'code', title: '表代码',filter:true, width:150}
                ,{ field: 'opear', title: '操作',width: '20%',templet: function(d){
                    var str="";

                    // str += '<button type="button" onclick="selectTable(\''+d.code+'\')" class="layui-btn layui-btn-normal layui-btn-xs layui_edit_btn">选择</button>';

                    return str;
                } }
            ]],
            filter: {
                bottom: false
            },
            done: function() {
                // 在 done 中开启
                layui.soulTable.render(this)
            }
        });

        //单击表格
        dlCommon.layerTableOn('mygrid', function (obj) {
            grid3tableid=obj.data.id;
            grid3tablecode=obj.data.code;
            getFileddataList();
        });

        layui.table.render({
            elem: '#mygrid2'
            ,height: height*0.5
            ,size: 'sm' //小尺寸的表格
            ,page: false //开启分页
            ,cols: [
            [ //表头
                { field: 'xh', title: '序号', width: '14%', fixed: 'left' },
                { field: 'fieldName', title: '中文名称', sort: true,filter:true, width: '32%' },
                { field: 'fieldCode', title: '字段代码', sort: true,filter:true, width: '32%', },
                // { field: 'fieldType', title: '字段类型', sort: true, width: '15%', },
                // { field: 'bz', title: '备注',  },
                { field: 'opear', title: '操作',width: '20%',templet: function(d){
                    var str="";

                    // str += '<button type="button" onclick="selectField(\''+d.fieldCode+'\')" class="layui-btn layui-btn-normal layui-btn-xs layui_edit_btn">选择</button>';

                    return str;
                } }
            ]],
            filter: {
                bottom: false
            },
            done: function() {
                // 在 done 中开启
                layui.soulTable.render(this)
            }
        });

    }

    function getMetadataList(){
        layui.table.reload("mygrid",{
            url:"/DevtZbplanParatjEntityController/getAllModelList",
            loading:true,
            where:{planid:planid},
            done:function(){
                dlCommon.layerSelectTable("mygrid")
                layui.soulTable.render(this)
            }
        });
    }

    function getFileddataList(){
        if(!grid3tableid){
            return;
        }
        var data={
            tableid:grid3tableid
        };
        layui.table.reload("mygrid2",{
            url:"/DevtModelMetadataFieldController/getAll",
            where:data,
            loading:true,
        });
    }


</script>

</html>
